<template>
  <div class="account">

    <!--背景动态图-->
    <vue-particles
        class="login-bg backBox"
        color="#a8b0e1"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#a8b0e1"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
    />

    <!--    注册-->
    <div class="headTop" @click="onClickLeft">
      <van-icon name="arrow-left" />
    </div>
    <h3>注册</h3>
    <van-form validate-first @failed="onFailed" @submit="submit">
      <div class="itemInput itemTop">
        <van-field
            v-model="valuetext"
            name="validatorText"
            label="账号"
            placeholder="账号"
            :rules="[{validator, message: '请填写正确的用户名'},]"
        />
      </div>


      <!--     message: '请填写正确的用户名' -->

      <van-field
          v-model="valuepass"
          name="validator"
          label="密码"
          placeholder="请输入密码"
          :rules="[{validator , message: '请输入格式正确的密码' }]"
      />
      <div class="itemInput itemBot">
        <van-field
            v-model="valueUserName"
            name="validator"
            label="昵称"
            placeholder="昵称"
            :rules="[{required: true, message: '请输入格式正确的昵称' }]"
        />
      </div>

      <div class="sexCenter">
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="0">男</van-radio>
          <van-radio name="1">女</van-radio>
        </van-radio-group>
      </div>
      <div class="itemTop">
        <van-field
            v-model="valuePhonenumber"
            name="valuePhonenumber"
            label="手机号"
            placeholder="手机号"
            :rules="[{validator: phoneVerification,message: '请输入手机号' }]"
        />
      </div>


      <div class="itemInput itemBot">
        <div>
          <button class="sendOut"
                  @click="timerDisabledTwoEdition"
                  v-html="buttonTextFlag? '发送验证码': phoneNumTime"
                  :disabled="buttonCountFlag"
          ></button>
        </div>
        <div class="">
          <van-field
              v-model="valueCode"
              name="validatorText"
              placeholder="验证码"
              :rules="[{ required: true ,message: '请输入验证码' }]"
          />
        </div>

      </div>
      <div class="defl SwitchPages">
        <router-link tag="p" to="/phonesign">验证码登录</router-link>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>

    </van-form>
  </div>
</template>

<script>
import {Toast} from "vant";
import {PhoneSignApi, registerSign} from "@/api/api";

export default {
  name: "Register",
  data() {
    return {
      eyeShow: false,
      valuetext: '',
      valuepass: '',
      valueUserName: '',
      radio: '0',
      valueSex: '',
      valuePhonenumber: '',
      valueCode: '',

      //定时器
      buttonCountFlag: false,
      buttonTextFlag: true,
      phoneNumTime: 60,
      phoneNumMeter: null,
      pattern: /^[1][3,4,5,7,8][0-9]{9}$/,

    }
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1)
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },

    //  密码验证
    validator(value) {
      if (value) {
        console.log(value)
        let a_reg = RegExp(/^[a-zA-Z0-9]$/)
        let b_reg = RegExp(/[~!@#$%^&*()\-=·@#￥%……&*（）、‘”'"[]{}——+]+/)
        let c_reg = RegExp(/\s/)
        let d_reg = RegExp(/^[u4e00-u9fa5_a-zA-Z0-9]+$/)
        if (a_reg.test(value)) {
          Toast('格式错误');
          return false
        } else if (b_reg.test(value)) {
          Toast('不能为特殊字符');
          return false
        } else if (c_reg.test(value)) {
          Toast('不能为空格');
          return false
        } else if (value.replace(/[^x00-xff]/g, 'xx').length < 6 || value.replace(/[^x00-xff]/g, 'xx').length > 20) {
          Toast('用户名不得小于6个或大于20个字符!');
          return false
        } else if (!d_reg.test(value)) {
          Toast('除字母数字以外不能输入')
          return false
        } else {
          return true
        }
      } else {
        Toast('请填写正确的');
        return false
      }
    },
    //  手机号验证
    phoneVerification(value) {
      if (value) {
        let a_reg = RegExp(/^[a-zA-Z0-9]$/)
        let b_reg = RegExp(/[~!@#$%^&*()\-=·@#￥%……&*（）、‘”'"[]{}——+]+/)
        let c_reg = RegExp(/\s/)
        let d_reg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (a_reg.test(value)) {
          Toast('格式错误');
          return false
        } else if (b_reg.test(value)) {
          Toast('不能为特殊字符');
          return false
        } else if (c_reg.test(value)) {
          Toast('不能为空格');
          return false
        } else if (!d_reg.test(value)) {
          Toast('请填写正确的手机号')
          return false
        } else {
          return true
        }
      } else {
        Toast('请填写手机号');
        return false
      }
    },
    //验证码计时器包括验证手机号正则
    timerDisabledTwoEdition() {
      //显示文字发送请求
      if (this.pattern.test(this.valuePhonenumber)) {
        //发送手机验证码
        if (this.buttonTextFlag) {

          PhoneSignApi(this.valuePhonenumber).then(res => {
            console.log(res)
          })
        }
        Toast('已发送验证码');
        //数子显示文字隐藏
        this.buttonCountFlag = true
        this.buttonTextFlag = false
        // 开始计时器
        this.phoneNumMeter = setInterval(() => {
          this.phoneNumTime -= 1
          // 判断数字等于零 结束定时器 数值重新被赋值60 提示框为空 按钮可用
          if (this.phoneNumTime == 0) {
            clearInterval(this.phoneNumMeter)
            this.phoneNumTime = 60
            // 显示文字
            this.buttonTextFlag = true
            // 显示数字
            this.buttonCountFlag = false
          }
        }, 1000)
      }
    },

    submit() {
      console.log(
          this.valuetext, this.valuepass, this.valueUserName,
          this.radio, this.valuePhonenumber, this.valueCode,)


      //注册接口
      registerSign(this.valuetext, this.valuepass, this.valuePhonenumber,
          this.valueCode, this.valueUserName, this.radio,).then(res => {
        console.log(res)

        if (res.data.code == 0 || res.data.status == 200) {
          console.log(res.data)
          //修改全局登录
          this.$store.state.isLogin = true
          this.$router.push({path: '/index'})
        } else {
          Toast(res.data.msg);
        }


      }).catch(() => {
        Toast('网络错误')
      })

    },
  },
}
</script>

<style scoped lang="less">
.account {
  background-color: rgb(255,255,255);

  //背景图
  .backBox {
    position: absolute;
    background-color: rgb(255,255,255);

    //background-color: rgb(168,176,225);
    //background-color: rgb(176, 224, 230);
    //background-color: rgb(163,148,128);
    //background-color: rgb(163,148,128);
    height: 100vh;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100vw;
  }

  padding: 0 18px;

  .headTop {
    margin-top: 33px;

    i {
      font-size: 22px;
    }
  }

  h3 {
    margin-top: 33px;
    margin-bottom: 35px;
    color: #EC0D0D;
    font-size: 28px;
  }

  .itemTop {
    border-radius: 9px 9px 0 0;
    overflow: hidden;
  }

  .itemBot {
    border-radius: 0 0 9px 9px;
  }

  .itemInput {
    overflow: hidden;
    background-color: #F8F8F8;

    /deep/ .InputDiv {
      width: 100%;
      background-color: #F8F8F8;
      border: 0;
    }

    input {
      width: 100%;
      background-color: #F8F8F8;
      border: 0;
      text-indent: 18px;
      height: 50px;
      line-height: 50px;
    }

    input.inputVerification {
      width: 66%;
    }

    button.sendOut {
      background-color: #F8F8F8;
      width: 30%;
      border: 0;
      line-height: 50px;
    }

    .p {
      height: 25px;
      line-height: 25px;
      color: red;
      padding-left: 20px
    }
  }

  .sexCenter {
    margin: 15px 0;
  }

  .SwitchPages {
    font-size: 14px;
    color: #BDBDBD;
    margin-top: 25px;
    margin-bottom: 30px;

  }

  .buttonSign {
    text-align: center;
    width: 80%;
    height: 40px;
    line-height: 40px;
    color: white;
    background-color: #FF0000;
    margin: auto;
    border-radius: 22px;
  }
}
</style>